<template>
  <div class="login-wrapper">
    <div class="login-info">
      <div class="login-brand">
        <img src="@/assets/img/logo.svg" />
        <span>{{ title }}</span>
      </div>
      <div class="login-box hidden-sm-and-down">
        <div class="login-img">
          <img
            class="img"
            src="@/assets/img/login-img.svg"
          />
          <div class="brand">{{ title }}后台管理系统</div>
          <div class="des">{{ title }} management system</div>
        </div>
      </div>
    </div>
    <div class="login-main">
      <div class="login-form">
        <div class="brand">{{ title }}后台管理系统</div>
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="rules"
          size="large"
          label-position="top">
          <el-form-item
            label="用户名"
            prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item
            label="密码"
            prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入登录密码"
              show-password />
          </el-form-item>
          <div class="login-btn">
            <el-button
              type="primary"
              size="large"
              :loading="loading"
              @click="loginSubmit">立即登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup name="Login">
import { ref, reactive, unref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore, useSettingsStore } from '@/store'

const { push, currentRoute } = useRouter()

const userStore = useUserStore()

const settingsStore = useSettingsStore()

const title = computed(() => settingsStore.getTitle)

const redirect = ref('')

const loading = ref(false)

const loginFormRef = ref(null)

const loginForm = reactive({
  username: '',
  password: ''
})

const rules = reactive({
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [
    { required: true, message: '登录密码不能为空', trigger: 'blur' },
    { min: 6, max: 18, message: '密码不能小于6位或大于18位', trigger: 'blur' }
  ]
})

const loginSubmit = () => {
  if (!unref(loginFormRef)) return
  unref(loginFormRef).validate((valid, fields) => {
    if (valid) {
      loading.value = true
      userStore.login(loginForm).then(() => {
        push({ path: redirect.value || '/' })
      }).catch(() => {
        loading.value = false
      })
    }
  })
}

watch(
  () => currentRoute.value,
  (route) => {
    redirect.value = route?.query?.redirect
  },
  {
    immediate: true
  }
)
</script>

<style lang="scss" scoped>
.login-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #293146;

  .login-info {
    padding: 15px;
    color: #fff;
    display: flex;
    flex-direction: column;

    .login-brand {
      display: flex;
      align-items: center;

      img {
        width: 48px;
        margin-right: 10px;
      }

      span {
        font-size: 20px;
        font-weight: 700;
      }
    }

    .login-box {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      .login-img {
        .img {
          width: 400px;
          display: block;
        }

        .brand {
          font-size: 36px;
          margin: 0 0 15px;
        }

        .des {
          font-size: 24px;
          margin: 0;
        }
      }
    }
  }

  .login-main {
    padding: 0 15px;
    color: #76838f;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    .login-form {
      width: 100%;
      padding: 20px;
      border-radius: 8px;
      background: #fff;
      box-sizing: border-box;

      .brand {
        text-align: center;
        font-size: 24px;
        padding: 10px 0;
      }

      .el-form {
        margin: 30px 0 20px;

        :deep(.el-form-item) {
          margin-bottom: 30px;

          &.is-required {
            .el-form-item__label::before {
              content: none;
            }
          }
        }

        .login-btn {
          margin-top: 44px;

          .el-button {
            width: 100%;
          }
        }
      }
    }
  }
}

@media (min-width: 768px) {
  .login-wrapper {
    .login-main {
      .login-form {
        max-width: 500px;
        box-sizing: border-box;
      }
    }
  }
}

@media (min-width: 1200px) {
  .login-wrapper {
    flex-direction: row;

    .login-info {
      flex: 1;
      padding: 30px;

      .login-box {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        .login-img {
          .img {
            width: 400px;
            display: block;
          }

          .brand {
            font-size: 36px;
            margin: 0 0 15px;
          }

          .des {
            font-size: 24px;
            margin: 0;
          }
        }
      }
    }

    .login-main {
      padding: 0 100px;
      background: #fff;
      flex: none;

      .login-form {
        width: 400px;
      }
    }
  }
}
</style>
